<template>
    <!-- 用户管理-->
    <div>
        <Modal v-model="modal1" title="请选择要充值的套餐" width="1000">
            <Form :model="recharge" :label-width="80">
                <FormItem label="套餐版本:">
                    <div class="RadioStyle" >
                        <div class="Block PaddingL" v-for="item in mealList" :key="item.id" :label="item.id">
                            <input type="radio" name="Storage" v-model="recharge.meal_id" :id="item.id" :value="item.id" />
                            <label :for="item.id">{{item.meal}}：{{item.pay_fee}}元 / {{item.count}}次</label>
                        </div>
                    </div>
<!--                    <RadioGroup v-model="recharge.meal_id">-->
<!--                        <Radio v-for="item in mealList" :label="item.id" :key="item.id">-->
<!--                            {{item.meal}}：{{item.pay_fee}}元 / {{item.count}}次-->
<!--                        </Radio>-->
<!--                    </RadioGroup>-->
                </FormItem>
                <FormItem label="备注:">
                    <div style="width: 300px">
                        <Input v-model="recharge.backup" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="请输入..."></Input>
                    </div>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="ok()">确定</Button>
                <Button type="text" @click="cancel()" style="margin-left: 8px">取消</Button>
            </div>
        </Modal>
        <!--错误信息提示-->
        <Modal v-model="modal3" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>错误</span>
            </p>
            <div style="text-align:center">
                <p>{{errmsg}}</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" @click="err()">确定</Button>
            </div>
        </Modal>
        <!--ocr信息-->
        <Modal v-model="modal4" width="450" title="模拟请求ocr">
            <Card style="background-color: #f8f8f9">
                <p slot="title">姓名：{{ocrinfo.Name}}</p>
                <p>性别：{{ocrinfo.Sex}}</p>
                <p>民族：{{ocrinfo.Folk}}</p>
                <p>年龄：{{ocrinfo.cardtype}}</p>
                <p>生日：{{ocrinfo.Birthday}}</p>
                <p>地址： {{ocrinfo.Address}}</p>
                <p>身份证号：{{ocrinfo.CardNo}}</p>
            </Card>
        </Modal>
        <div style="text-align: right">
            <Button type="primary" v-on:click="initialize" @click="spinShow = true">刷新</Button>
        </div>
        <br>
        <Table border :columns="columns12" :data="dataShow" stripe :loading="spinShow">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button type="success" size="small" style="margin-right: 5px" @click="modal1 = true"
                        v-on:click="updateOcrCount(row)">充值
                </Button>
                <Button type="error" size="small" style="margin-right: 5px;" @click="del(row, index)">删除</Button>
                <Button type="primary" size="small" @click="statistics(row)">统计</Button>
            </template>
            <template slot-scope="{ row }" slot="action1">
                <Button type="primary" size="small" style="margin-right: 5px"
                        v-on:click="getVisitAddress(row)">请求
                </Button>
            </template>
        </Table>
        <br>
        <div style="text-align: right">
            <Page show-total show-elevator :total="total" @on-change="change"/>
        </div>
    </div>
</template>
<script>
import { getUserList, delUser, getMealList, updateCount, getVisitAddress } from '@/api/registered/ocr'

export default {
  data () {
    return {
      // 加载中
      spinShow: true,
      // 充值列表弹出框
      modal1: false,
      // 套餐
      modal2: '',
      // 错误信息提示框状态
      modal3: false,
      // ocr信息、
      modal4: false,
      // 错误信息内容
      errmsg: '',
      // 用户充值对象
      recharge: {
        userid: '',
        meal_id: '',
        backup: ''
      },
      // ocr请求查询对象
      ocr: {
        userid: ''
      },
      ocrinfo: [],
      // 套餐列表
      mealList: [],
      // 删除用户时储存id的对象
      delUser: {
        userid: '',
        secret: ''
      },
      // 统计时传参
      statisticsUser: {
        userid: '',
        company_name: '',
        count: '',
        res_count: ''
      },
      /* 分页开始 */
      // 调接口后返回的数据
      pageData: [],
      // 总共多少条数据，谁便给个默认值
      total: 1,
      // 一页显示多少条数据
      pageSize: 10,
      // 共几页，谁便给个默认值
      pageNum: 1,
      // 选定页显示的数据
      dataShow: [],
      // 选择第几页，谁便给默认值
      currentPage: 1,
      // 表格列名对应数据
      columns12: [
        {
          title: '公司名称',
          key: 'company_name'
        },
        {
          title: '公司地址',
          key: 'company_address'
        },
        {
          title: '公司电话',
          key: 'company_mobile'
        },
        {
          title: '联系人姓名',
          key: 'conn_username'
        },
        {
          title: '联系人电话',
          key: 'conn_usermobile'
        },
        {
          title: '总数量',
          key: 'count'
        },
        {
          title: '剩余数量',
          key: 'res_count'
        },
        {
          title: '备注',
          key: 'backup'
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        },
        {
          title: '模拟请求OCR',
          slot: 'action1',
          width: 150,
          align: 'center'
        }
      ]
    }
  },
  mounted () {
    this.initialize()
  },
  methods: {
    // 点击页码后展示数据
    change (page) {
      this.dataShow = this.pageData[page - 1]
    },
    // 初始化加载用户列表
    initialize () {
      getUserList().then(ret => {
        if (ret.data.errcode === 1001) {
          // 一共多少条数据，在分页出展示一下
          this.total = ret.data.data.length
          // 获取后台用户列表数据,根据后台数据的条数和每页显示数量算出一共几页,得0时设为1
          this.pageNum = Math.ceil(ret.data.data.length / this.pageSize) || 1
          for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5(对slice操作来说是0-5)条，第二页是6-10(对slice操作来说是5-10)条...
            this.pageData[i] = ret.data.data.slice(this.pageSize * i, this.pageSize * (i + 1))
            // 默认显示第一页
            this.dataShow = this.pageData[0]
            // 关闭加载动画
            this.spinShow = false
          }
        } else {
          this.warning()
        }
      })
    },
    // 提示信息
    success () {
      this.$Message.success('成功')
    },
    warning () {
      this.$Message.warning('数据加载失败')
    },
    warning1 () {
      this.$Message.warning('您的识别数量不足，请及时联系平台充值')
    },
    // 套餐充值
    ok () {
      updateCount(this.recharge).then(ret => {
        console.log(this.recharge)
        if (ret.data.errcode === 1001) {
          this.initialize()
          this.success()
          this.modal1 = false
        } else {
          this.warning()
          this.modal1 = false
        }
      })
    },
    cancel () {
      this.modal1 = false
    },
    // 获取要充值行用户的ID
    updateOcrCount (row) {
      this.recharge.userid = row.userid
      // 获取后台套餐列表
      getMealList().then(ret => {
        this.mealList = ret.data.data
      })
    },
    // 获取请求调用ocr的信息
    getVisitAddress (row) {
      this.ocr.userid = row.userid
      this.spinShow = true
      getVisitAddress(this.ocr).then(ret => {
        if (ret.data.errcode === -1) {
          this.spinShow = false
          this.warning1()
        } else {
          this.ocrinfo = ret.data
          this.modal4 = true
          this.spinShow = false
        }
      })
    },
    // 删除用户
    del (row, index) {
      this.delUser.userid = row.userid
      delUser(this.delUser).then(ret => {
        if (ret.data.errcode === -1) {
          this.modal3 = true
          this.errmsg = ret.data.errmsg
        }
      })
    },
    // 统计
    statistics (row) {
      this.statisticsUser.userid = row.userid
      this.statisticsUser.company_name = row.company_name
      this.statisticsUser.res_count = row.res_count
      this.statisticsUser.count = row.count
      this.$router.push({ name: 'statistics', params: this.statisticsUser })
    },
    // 错误信息关闭
    err () {
      this.modal3 = false
    }
  }
}
</script>
<style>
    .RadioStyle input {
        display: none
    }
    .RadioStyle label {
        border: 1px solid #CCC;
        color: #666;
        padding: 2px 10px 2px 5px;
        line-height: 28px;
        min-width: 80px;
        text-align: center;
        float: left;
        margin: 2px;
        border-radius: 4px
    }
    .RadioStyle input:checked + label {
        border: 1px solid #00a4ff;
        background-size: 21px 21px;
        color: #00a4ff
    }
    .RadioStyle input:disabled + label {
        opacity: 0.7;
    }
</style>
